<template>
    <div class="detail">
        <div id="detail-inner">
            <div class="inner">
                <!-- 请求提示 -->
                <my-loading :visible="loading" :reload="init" />
                <!-- 正文内容 -->
                <div class="content" v-show="info.title" id="AlloyFinger" v-finger:swipe="swipeHandler">
                    <div class="article_info">
                        <h1 class="title">{{info.title}}</h1>
                        <span class="befrom">{{info.source}}</span>
                        <span class="newstime">{{info.time}}</span>
                    </div>
                    <div class="article_content">
                        <div class="content_html" v-html='info.content' @click="imageChange($event)"></div>
                    </div>
                </div>
                <div class="source" v-show="systemType=='ios'">以上内容由“{{info.source}}”上传发布<span @click="callEvent">查看原文</span></div>
            </div> 
        </div>
        <my-larger ref="mychild" v-show="isShow" @click.native="isShow=false" :newImgList="newImgList" />
    </div>
</template>

<script>
import myLoading from '@/components/loading'
import myLarger from '@/components/larger'
import { getNewsInfo } from '@/api/api'
import { GetUrlParam, getSystemType, contains } from '@/utils'

export default {
    data() {
        return {
            newId: '',
            loading: false,
            info:{},
            swipeUpNum:0,
            systemType:'',

            isShow: false,
            imgUrls: [],
            oldImgList: [],
            newImgList: [],
        }
    },
    components:{
        myLoading,
        myLarger
    },
    mounted(){
        window.sendSwipeUpNum = this.sendSwipeUpNum;
        this.newId = GetUrlParam('newId')
        this.systemType = getSystemType()
        this.init();
    },
    methods: {
        swipeHandler(e){
            // console.log("swipe" + e.direction);
            if(e.direction == 'Up'){
                this.swipeUpNum++;
            }
        },
        init(){
            this.loading = 'loading'
            getNewsInfo({
                "newId": this.newId
            }).then(res => {
                if( res.code == 200 ){
                    this.loading = false
                    this.info = res.data;

                    this.imgUrls = res.data.content.match(/<img.*?src="(.*?)".*?\/?>/gi)
                    let arrImg = []
                    let srcList = []

                    for(var j = 0; j < this.imgUrls.length; j++){
                        // 正则匹配，摘出img标签下的src里的内容，即capture
                        this.imgUrls[j].replace(/src=[\'\"]?([^\'\"]*)[\'\"]?/i,(match,capture)=>{
                            arrImg.push(capture)
                            srcList.push(capture + '?x-oss-process=image/rotate,270')
                        })
                    }
                    this.oldImgList = arrImg
                    this.newImgList = srcList
                }else{
                    this.loading = 'error'
                }
            })
        },
        sendSwipeUpNum(){
            var data1 = $('#detail-inner').height();
            var data2 = $('#AlloyFinger').height();
            var num = Math.ceil(data2/data1)

            if( this.systemType == 'android' ){
                return num + '&' + this.swipeUpNum
            }

            if( this.systemType == 'ios' ){
                window.webkit.messageHandlers.startComputeSwipeTimes.postMessage({data:num + '&' + this.swipeUpNum});
            }
        },
        imageChange(e){
            if (e.target.nodeName == 'IMG') {
                const index = contains(this.oldImgList,e.target.currentSrc) + 1
                this.$refs.mychild.parentHandleclick(index-1); //调用子组件方法
                this.isShow = true
            }
        },
        callEvent(){
            window.webkit.messageHandlers.viewNewsDetailEvent.postMessage({data:this.info.pageUrl});
        }
    }
}
</script>

<style lang="less" scoped>
.detail{
    #detail-inner{
        height:100%;
        .inner{
            position:relative;
            height:100%;
            padding-bottom: 50px;
            overflow:scroll;
            /*解决ios上滑动不流畅*/
            -webkit-overflow-scrolling: touch;
            .content{
                .article_info{
                    margin: 0 15px;
                    padding: 25px 0 10px 0;
                    border-bottom:1px solid #F4F5FA;
                    .title{
                        font-size:22px;
                        line-height:27px;
                        color:#323232;
                        margin-bottom:14px;
                        word-wrap:break-word;
                        text-align: justify;
                    }
                    span{
                        font-size:13px;
                        color:#999;
                        &:last-child{
                            margin-left:40px;
                        }
                    }
                }
            }
            .source{
                font-size:13px;
                text-align: center;
                color:#d3d3d3;
                span{
                    color:#5f88ff;
                    text-decoration: none;
                    margin-left:10px;
                }
            }
        }
    }
}
</style>